<template>
  <div class="form-edit-field-config">
    <div v-if="!drawer" class="btnWrap">
      <h3 class="title">表单字段配置</h3>
      <je-button v-if="showSaveButton" size="small" class="submit" type="primary" @click="onSubmit"
        ><i class="fal fa-save"></i>保存关闭</je-button
      >
      <i class="close fal fa-times" @click="onClose"></i>
    </div>
    <je-form
      ref="formRef"
      class="form-config"
      :style="`bottom:${showSaveButton ? '20px' : '0'} `"
      :rules="rules"
      :model="formState"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :colon="false"
      size="small"
      autocomplete="off"
    >
      <je-collapse v-model:activeKey="activeKey" expand-icon-position="right" class="changeClass">
        <je-collapse-panel key="1" header="常规配置">
          <je-form-item label="编码" name="RESOURCEFIELD_CODE">
            <je-input v-model:value.trim="formState.RESOURCEFIELD_CODE" disabled />
          </je-form-item>

          <je-form-item
            label="名称"
            name="RESOURCEFIELD_NAME"
            v-bind="validateInfos.RESOURCEFIELD_NAME"
            validate-type="tooltip"
          >
            <je-input v-model:value.trim="formState.RESOURCEFIELD_NAME" />
          </je-form-item>

          <je-form-item label="类型" name="RESOURCEFIELD_XTYPE">
            <je-select
              v-model:value="formState.RESOURCEFIELD_XTYPE"
              allow-clear
              list-height="475"
              config-info="JE_FUNC_FIELD_XTYPE,formState.RESOURCEFIELD_XTYPE,code,S"
              @change="changeType"
            />
          </je-form-item>

          <je-form-item name="RESOURCEFIELD_VALUE">
            <template #label>
              <div class="iconWrap">
                <i
                  class="fas fa-bolt"
                  :style="`color:${formState.RESOURCEFIELD_VALUEFN ? '#F4CE4A' : '#8d98ab'}`"
                  @click="handleDefaultJs('RESOURCEFIELD_VALUEFN', true)"
                ></i>
                默认值
                <!-- <i class="fas fa-flower" style="color: rgb(235, 235, 235)"></i> -->
              </div>
            </template>
            <je-select
              v-model:value="formState.RESOURCEFIELD_VALUE"
              allow-clear
              :editable="true"
              list-height="475"
              style="width: 90%"
              config-info="JE_DEFAULEVALUE,formState.RESOURCEFIELD_VALUE,code,S"
            >
            </je-select>
            <i
              class="fal fa-book"
              style="margin-left: 13px; cursor: pointer"
              @click.stop.prevent="clickBookIcon"
            ></i>
          </je-form-item>

          <!-- <je-form-item label="依附字段" name="RESOURCEFIELD_ROWFIELD">
            <je-select
              v-model:value="formState.RESOURCEFIELD_ROWFIELD"
              list-height="475"
              allow-clear
              :options="funcStore.attachFields"
            />
          </je-form-item> -->

          <je-form-item label="标签隐藏" name="RESOURCEFIELD_HIDELABEL">
            <je-switch v-model:value="formState.RESOURCEFIELD_HIDELABEL" mode="checkbox" label="" />
            <span class="prompt">字段将不会展示标签内容。</span>
          </je-form-item>

          <je-form-item label="标签位置" name="RESOURCEFIELD_LABELALIGN">
            <je-radio-group
              v-model:value="formState.RESOURCEFIELD_LABELALIGN"
              class="raidoClass"
              button-style="solid"
              option-type="button"
              config-info="JE_FUNC_FIELD_ALIGN,formState.RESOURCEFIELD_LABELALIGN,code,S"
            >
            </je-radio-group>
          </je-form-item>

          <je-form-item label="隐藏" name="RESOURCEFIELD_HIDDEN">
            <je-switch v-model:value="formState.RESOURCEFIELD_HIDDEN" mode="checkbox" label="" />
            <span class="prompt">启动后则隐藏该字段。</span>
          </je-form-item>

          <je-form-item label="只读" name="RESOURCEFIELD_READONLY">
            <je-switch v-model:value="formState.RESOURCEFIELD_READONLY" mode="checkbox" label="" />
            <span class="prompt">启动后则该字段不能编辑。</span>
          </je-form-item>

          <je-form-item label="必填" name="RESOURCEFIELD_REQUIRE">
            <je-switch v-model:value="formState.RESOURCEFIELD_REQUIRE" mode="checkbox" label="" />
            <span class="prompt">启动后该字段为必填字段。</span>
          </je-form-item>

          <!-- <je-form-item label="历史留痕" name="RESOURCEFIELD_HISTORY">
            <je-switch v-model:value="formState.RESOURCEFIELD_HISTORY" mode="checkbox" label="" />
            <span class="prompt">启动后修改会留痕迹，配合功能配置使用。</span>
          </je-form-item> -->

          <je-form-item label="事件编辑" name="RESOURCEFIELD_JSLISTENER">
            <je-tooltip placement="top" title="编辑">
              <span
                class="iconWrap"
                style="margin-left: 6px"
                @click="handleJs('RESOURCEFIELD_JSLISTENER', 'field', '字段事件')"
              >
                <i
                  class="fas fa-bolt"
                  :style="`color:${
                    changeJsListener(formState.RESOURCEFIELD_JSLISTENER) ? '#F4CE4A' : '#8d98ab'
                  }`"
                ></i
              ></span>
            </je-tooltip>
            <span class="prompt">注册且监控字段的各种事件。</span>
          </je-form-item>
          <je-button v-if="!isShowFieldConfig" style="width: 100%" @click="clickListFiled"
            >激活列表字段配置面板</je-button
          >
        </je-collapse-panel>

        <je-collapse-panel
          v-if="
            ['rgroup', 'cgroup', 'cbbfield', 'treessfield'].indexOf(
              formState.RESOURCEFIELD_XTYPE,
            ) !== -1
          "
          key="2"
          header="字典配置"
        >
          <div class="top">
            <je-button type="text" class="item" @click="showDicModel">
              <i class="fal fa-book"></i>选择字典
            </je-button>
            <je-button
              type="text"
              class="item"
              @click="
                showModal({
                  typePage: 'DataDictionaryValueConfig',
                  title: '带值配置（数据字典）',
                  ...formState,
                  basicFields,
                })
              "
            >
              <i class="jeicon jeicon-link"></i>带值配置
            </je-button>
            <je-button
              type="text"
              class="item"
              @click="
                valueConfig({
                  type: 'DataDictionaryValueConfig',
                  funcId: '60c01feb-d857-400b-91e1-b307b1c34c87',
                })
              "
            >
              <i class="fal fa-filter"></i>过滤配置
            </je-button>
            <je-button type="text" class="item" @click="checkDic">
              <i class="jeicon jeicon-advanced-search"></i>查看字典
            </je-button>
            <!-- <je-button
              class="item"
              type="text"
              @click="
                showModal({
                  typePage: 'DataDictionaryHighConfig',
                  title: '高级配置（数据字典） ',
                  ...formState,
                })
              "
            >
              <i class="fal fa-cog"></i>高级配置
            </je-button> -->
          </div>

          <je-form-item label="配置信息" name="RESOURCEFIELD_CONFIGINFO">
            <je-textarea v-model:value="formState.RESOURCEFIELD_CONFIGINFO" :rows="4" />
          </je-form-item>

          <je-form-item label="&nbsp;" name="RESOURCEFIELD_CONFIGINFO_DESCRIBE">
            <div class="info">
              <h3 class="title"> 配置项信息说明 </h3>
              <p class="p">字典编码,表单字段1~表单字段2~表单字段3,id~text~code, M(多选)|S(单选)</p>
              <p v-if="['treessfield'].indexOf(formState.RESOURCEFIELD_XTYPE) !== -1" class="p">
                id_,text_,code_ 加后缀下划线的可以将层级关系带下来</p
              >
            </div>
          </je-form-item>

          <je-form-item name="RESOURCEFIELD_WHERESQL">
            <template #label>
              <div class="iconWrap">
                <i
                  class="fas fa-question-circle"
                  style="color: #ebebeb"
                  :style="changeColor(unitTipShow)"
                  @click="
                    clickTipView({
                      title: '过滤条件',
                      unitTpl: FORM_FILTER_UNITPLE,
                    })
                  "
                  @mouseenter="unitTipShow = true"
                  @mouseleave="unitTipShow = false"
                />
                过滤条件
              </div>
            </template>
            <je-textarea v-model:value="formState.RESOURCEFIELD_WHERESQL" :rows="4" />
          </je-form-item>
          <je-form-item label="条件说明" name="RESOURCEFIELD_CONDITION_DESC">
            <je-textarea v-model:value="formState.RESOURCEFIELD_CONDITION_DESC" :rows="4" />
          </je-form-item>
          <je-form-item
            v-if="['SQL', 'SQL_TREE', 'CUSTOM'].indexOf(dicType) != -1"
            label="过滤传参"
            name="RESOURCEFIELD_DD_CUSTOMER_VARIABLES"
          >
            <je-table
              class="my-input"
              header-align="center"
              :stripe="false"
              keep-source
              :auto-load="true"
              size="mini"
              show-overflow="ellipsis"
              height="128"
              resizable
              auto-resize
              border
              :edit-config="{
                trigger: 'click',
                mode: 'cell',
                showStatus: false,
              }"
              :store="dicGridStore"
            >
              <je-table-column width="40" align="center">
                <template #header>
                  <i
                    style="font-size: 16px; cursor: pointer"
                    class="fal fa-plus"
                    @click="addDicColumn"
                  ></i>
                </template>
                <template #default="{ row }">
                  <i
                    style="font-size: 16px; cursor: pointer"
                    class="fal fa-times"
                    @click="deleteDicColumn(row)"
                  ></i>
                </template>
              </je-table-column>
              <je-table-column
                field="code"
                title="键编码"
                :edit-render="{ autofocus: '.ant-input' }"
                min-width="90"
              >
                <template #edit="{ row }">
                  <je-input v-model:value="row.code" name="code" />
                </template>
              </je-table-column>
              <je-table-column
                field="value"
                title="值编码"
                :edit-render="{ autofocus: '.ant-input' }"
                min-width="90"
              >
                <template #edit="{ row }">
                  <je-input v-model:value="row.value" name="value" />
                </template>
              </je-table-column>
            </je-table>
          </je-form-item>
          <!-- otherConfig组件位置 -->
          <OtherConfig
            :key="formState.JE_CORE_RESOURCEFIELD_ID"
            v-model:other-config="formState.RESOURCEFIELD_OTHERCONFIG"
            :xtype="formState.RESOURCEFIELD_XTYPE"
            :config-info="formState.RESOURCEFIELD_CONFIGINFO"
          />
        </je-collapse-panel>

        <je-collapse-panel
          v-if="['jsonarrayfield'].indexOf(formState.RESOURCEFIELD_XTYPE) !== -1"
          key="3"
          header="对象集合配置"
        >
          <OtherConfig
            v-if="['jsonarrayfield'].indexOf(formState.RESOURCEFIELD_XTYPE) !== -1"
            :key="formState.JE_CORE_RESOURCEFIELD_ID"
            v-model:other-config="formState.RESOURCEFIELD_OTHERCONFIG"
            :xtype="formState.RESOURCEFIELD_XTYPE"
          />
        </je-collapse-panel>
        <je-collapse-panel
          v-if="['codeeditor'].indexOf(formState.RESOURCEFIELD_XTYPE) !== -1"
          key="3"
          header="代码编辑器配置"
        >
          <OtherConfig
            :key="formState.JE_CORE_RESOURCEFIELD_ID"
            v-model:other-config="formState.RESOURCEFIELD_OTHERCONFIG"
            :xtype="formState.RESOURCEFIELD_XTYPE"
          />
        </je-collapse-panel>
        <!-- <je-collapse-panel
          v-if="['displayfield'].indexOf(formState.RESOURCEFIELD_XTYPE) !== -1"
          key="3"
          header="虚拟字段配置"
        >
          <je-form-item label="配置信息" name="RESOURCEFIELD_CONFIGINFO">
            <je-textarea v-model:value="formState.RESOURCEFIELD_CONFIGINFO" :rows="4" />
          </je-form-item> -->

        <!-- <je-form-item label="&nbsp;">
            <div class="info">
              <h3 class="title"> 配置项信息说明 </h3>
              <div class="p">
                可以编写数据模版，显示表单里的数据，如：&lt;div&gt;{表单字段}&lt;/div&gt;</div
              >
            </div>
          </je-form-item> -->
        <!-- </je-collapse-panel> -->
        <je-collapse-panel
          v-if="['numberfield'].indexOf(formState.RESOURCEFIELD_XTYPE) !== -1"
          key="3"
          header="数值框配置"
        >
          <je-form-item label="配置信息" name="RESOURCEFIELD_CONFIGINFO">
            <je-textarea v-model:value="formState.RESOURCEFIELD_CONFIGINFO" :rows="4" />
          </je-form-item>

          <je-form-item label="&nbsp;" name="RESOURCEFIELD_CONFIGINFO_DESCRIBE">
            <div class="info">
              <h3 class="title"> 配置项信息说明 </h3>
              <p class="p"> 小数精度 配置如：3，表示三位小数 </p>
            </div>
          </je-form-item>
        </je-collapse-panel>
        <je-collapse-panel
          v-if="['colorfield'].indexOf(formState.RESOURCEFIELD_XTYPE) !== -1"
          key="3"
          header="颜选器配置"
        >
          <je-form-item label="配置信息" name="RESOURCEFIELD_CONFIGINFO">
            <je-textarea v-model:value="formState.RESOURCEFIELD_CONFIGINFO" :rows="4" />
          </je-form-item>

          <je-form-item label="&nbsp;" name="RESOURCEFIELD_CONFIGINFO_DESCRIBE">
            <div class="info">
              <h3 class="title"> 配置项信息说明 </h3>
              <p class="p">
                配置项信息说明
                #ffffff,#000000,....(六位的颜色值，如果配上颜色值，则选择器提供备选的颜色值,可以配置多个颜色值)
              </p>
            </div>
          </je-form-item>
        </je-collapse-panel>
        <je-collapse-panel
          v-if="
            ['datefield', 'rangedatefield', 'clocktimefield', 'rangeclocktimefield'].indexOf(
              formState.RESOURCEFIELD_XTYPE,
            ) !== -1
          "
          key="3"
          header="日期配置"
        >
          <je-form-item label="配置信息" name="RESOURCEFIELD_CONFIGINFO">
            <je-textarea v-model:value="formState.RESOURCEFIELD_CONFIGINFO" :rows="4" />
          </je-form-item>

          <je-form-item label="&nbsp;" name="RESOURCEFIELD_CONFIGINFO_DESCRIBE">
            <div class="info">
              <h3 class="title"> 配置项信息说明 </h3>
              <p class="p">
                日期：YYYY-MM-DD<br />
                日期时间：YYYY-MM-DD HH:mm:ss<br />
                年份：YYYY<br />
                季度：YYYY-Q<br />
                月份：YYYY-MM<br />
                周：YYYY-wo<br />
                时间：HH:mm:ss<br />
                其他配置可以参考：<a
                  href="https://day.js.org/docs/zh-CN/display/format"
                  target="_blank"
                  >dayjs</a
                >
              </p>
            </div>
          </je-form-item>

          <!-- otherConfig组件位置 -->
          <OtherConfig
            v-if="['datefield', 'rangedatefield'].indexOf(formState.RESOURCEFIELD_XTYPE) !== -1"
            :key="formState.JE_CORE_RESOURCEFIELD_ID"
            v-model:other-config="formState.RESOURCEFIELD_OTHERCONFIG"
            :xtype="formState.RESOURCEFIELD_XTYPE"
          />
        </je-collapse-panel>

        <je-collapse-panel
          v-if="['gridssfield'].indexOf(formState.RESOURCEFIELD_XTYPE) !== -1"
          key="4"
          header="关联选择"
        >
          <div class="top">
            <je-button
              type="text"
              class="item"
              @click="
                showModal({
                  typePage: 'InquireChooseValueConfig',
                  title: '带值配置（关联查询）',
                  ...formState,
                })
              "
            >
              <i class="jeicon jeicon-link"></i>带值配置
            </je-button>
            <je-button
              class="item"
              type="text"
              @click="valueConfig({ type: 'InquireChooseValueConfig' })"
            >
              <i class="fal fa-filter"></i>过滤配置
            </je-button>
          </div>

          <je-form-item label="配置信息" name="RESOURCEFIELD_CONFIGINFO">
            <je-textarea v-model:value="formState.RESOURCEFIELD_CONFIGINFO" :rows="4" />
          </je-form-item>

          <je-form-item label="&nbsp;" name="RESOURCEFIELD_CONFIGINFO_DESCRIBE">
            <div class="info">
              <h3 class="title"> 配置项信息说明 </h3>
              <p class="p"> 功能编码,表单字段1~表单字段2,功能字段1~功能字段2, M(多选)|S(单选)。 </p>
            </div>
          </je-form-item>

          <je-form-item name="RESOURCEFIELD_WHERESQL">
            <template #label>
              <div class="iconWrap">
                <i
                  class="fas fa-question-circle"
                  style="color: #ebebeb"
                  :style="changeColor(unitTipShow)"
                  @click="
                    clickTipView({
                      title: '过滤条件',
                      unitTpl: FORM_FILTER_UNITPLE,
                    })
                  "
                  @mouseenter="unitTipShow = true"
                  @mouseleave="unitTipShow = false"
                />
                过滤条件
              </div>
            </template>
            <je-textarea v-model:value="formState.RESOURCEFIELD_WHERESQL" :rows="4" />
          </je-form-item>

          <je-form-item label="条件说明" name="RESOURCEFIELD_CONDITION_DESC">
            <je-textarea v-model:value="formState.RESOURCEFIELD_CONDITION_DESC" :rows="4" />
          </je-form-item>
          <!-- otherConfig组件位置 -->
          <OtherConfig
            :key="formState.JE_CORE_RESOURCEFIELD_ID"
            v-model:other-config="formState.RESOURCEFIELD_OTHERCONFIG"
            :xtype="formState.RESOURCEFIELD_XTYPE"
            :config-info="formState.RESOURCEFIELD_CONFIGINFO"
          />
        </je-collapse-panel>

        <je-collapse-panel
          v-if="['searchfield'].indexOf(formState.RESOURCEFIELD_XTYPE) !== -1"
          key="5"
          header="查询选择"
        >
          <div class="top">
            <je-button
              class="item"
              type="text"
              @click="
                showModal({
                  typePage: 'SmartQueryValueConfig',
                  title: '带值配置(查询选择)',
                  ...formState,
                })
              "
            >
              <i class="jeicon jeicon-link"></i>带值配置
            </je-button>
            <je-button class="item" type="text" @click="valueConfig">
              <i class="fal fa-filter"></i>过滤配置
            </je-button>
          </div>

          <je-form-item label="配置信息" name="RESOURCEFIELD_CONFIGINFO">
            <je-textarea v-model:value="formState.RESOURCEFIELD_CONFIGINFO" :rows="4" />
          </je-form-item>

          <je-form-item label="&nbsp;" name="RESOURCEFIELD_CONFIGINFO_DESCRIBE">
            <div class="info">
              <h3 class="title"> 配置项信息说明 </h3>
              <p class="p"> 功能编码,表单字段1~表单字段2,功能字段1~功能字段2, M(多选)|S(单选)。 </p>
            </div>
          </je-form-item>

          <je-form-item name="RESOURCEFIELD_WHERESQL">
            <template #label>
              <div class="iconWrap">
                <i
                  class="fas fa-question-circle"
                  style="color: #ebebeb"
                  :style="changeColor(unitTipShow)"
                  @click="
                    clickTipView({
                      title: '过滤条件',
                      unitTpl: FORM_FILTER_UNITPLE,
                    })
                  "
                  @mouseenter="unitTipShow = true"
                  @mouseleave="unitTipShow = false"
                />
                过滤条件
              </div>
            </template>
            <je-textarea v-model:value="formState.RESOURCEFIELD_WHERESQL" :rows="4" />
          </je-form-item>

          <je-form-item label="条件说明" name="RESOURCEFIELD_CONDITION_DESC">
            <je-textarea v-model:value="formState.RESOURCEFIELD_CONDITION_DESC" :rows="4" />
          </je-form-item>

          <!-- otherConfig组件位置 -->
          <OtherConfig
            :key="formState.JE_CORE_RESOURCEFIELD_ID"
            v-model:other-config="formState.RESOURCEFIELD_OTHERCONFIG"
            :xtype="formState.RESOURCEFIELD_XTYPE"
            :config-info="formState.RESOURCEFIELD_CONFIGINFO"
          />
        </je-collapse-panel>

        <je-collapse-panel
          v-if="['vueuserfield'].indexOf(formState.RESOURCEFIELD_XTYPE) !== -1"
          key="6"
          header="人员选择"
        >
          <div class="top">
            <je-button
              class="item"
              type="text"
              @click="
                showModal({
                  typePage: 'PeopleChooseValueConfig',
                  title: '带值配置(人员选择)',
                  ...formState,
                })
              "
            >
              <i class="jeicon jeicon-link"></i>带值配置
            </je-button>
            <!-- <je-button
              class="item"
              type="text"
              @click="
                valueConfig({
                  type: PeopleChooseValueConfig,
                  funcId: 'Zc0kEcuTuKRJsedFx7W',
                })
              "
            >
              <i class="fal fa-filter"></i>过滤配置
            </je-button> -->
          </div>

          <je-form-item label="配置信息" name="RESOURCEFIELD_CONFIGINFO">
            <je-textarea v-model:value="formState.RESOURCEFIELD_CONFIGINFO" :rows="4" />
          </je-form-item>

          <je-form-item label="&nbsp;" name="RESOURCEFIELD_CONFIGINFO_DESCRIBE">
            <div class="info">
              <h3 class="title"> 配置项信息说明 </h3>
              <p class="p">
                JE_RBAC_VUSERQUERY,表单字段1~表单字段2, USERID~USERNAME,M(多选)|S(单选)。
              </p>
            </div>
          </je-form-item>

          <!-- <je-form-item name="RESOURCEFIELD_WHERESQL">
            <template #label>
              <div class="iconWrap">
                <i
                  class="fas fa-question-circle"
                  style="color: #ebebeb"
                  :style="changeColor(unitTipShow)"
                  @click="
                    clickTipView({
                      title: '过滤条件',
                      unitTpl: FORM_FILTER_UNITPLE,
                    })
                  "
                  @mouseenter="unitTipShow = true"
                  @mouseleave="unitTipShow = false"
                />
                过滤条件
              </div>
            </template>
            <je-textarea v-model:value="formState.RESOURCEFIELD_WHERESQL" :rows="4" />
          </je-form-item> -->
          <!-- otherConfig组件位置 -->
          <OtherConfig
            :key="formState.JE_CORE_RESOURCEFIELD_ID"
            v-model:other-config="formState.RESOURCEFIELD_OTHERCONFIG"
            :xtype="formState.RESOURCEFIELD_XTYPE"
            :config-info="formState.RESOURCEFIELD_CONFIGINFO"
          />
        </je-collapse-panel>

        <je-collapse-panel
          v-if="['imagepickerfield'].indexOf(formState.RESOURCEFIELD_XTYPE) !== -1"
          key="7"
          header="图选器配置"
        >
          <!-- otherConfig组件位置 -->
          <OtherConfig
            :key="formState.JE_CORE_RESOURCEFIELD_ID"
            v-model:other-config="formState.RESOURCEFIELD_OTHERCONFIG"
            :xtype="formState.RESOURCEFIELD_XTYPE"
          />
        </je-collapse-panel>

        <je-collapse-panel
          v-if="['uxfilefield'].indexOf(formState.RESOURCEFIELD_XTYPE) !== -1"
          key="8"
          header="附件配置(单)"
        >
          <!-- otherConfig组件位置 -->
          <OtherConfig
            :key="formState.JE_CORE_RESOURCEFIELD_ID"
            v-model:other-config="formState.RESOURCEFIELD_OTHERCONFIG"
            :xtype="formState.RESOURCEFIELD_XTYPE"
          />
        </je-collapse-panel>

        <je-collapse-panel
          v-if="['uxfilesfield'].indexOf(formState.RESOURCEFIELD_XTYPE) !== -1"
          key="9"
          header="附件配置(多)"
        >
          <!-- otherConfig组件位置 -->
          <OtherConfig
            :key="formState.JE_CORE_RESOURCEFIELD_ID"
            v-model:other-config="formState.RESOURCEFIELD_OTHERCONFIG"
            :xtype="formState.RESOURCEFIELD_XTYPE"
          />
        </je-collapse-panel>

        <je-collapse-panel
          v-if="['child'].indexOf(formState.RESOURCEFIELD_XTYPE) !== -1"
          key="21"
          header="子功能配置"
        >
          <!-- otherConfig组件位置 -->
          <OtherConfig
            :key="formState.JE_CORE_RESOURCEFIELD_ID"
            v-model:other-config="formState.RESOURCEFIELD_OTHERCONFIG"
            :xtype="formState.RESOURCEFIELD_XTYPE"
          />
        </je-collapse-panel>

        <je-collapse-panel
          v-if="['childfuncfield'].indexOf(formState.RESOURCEFIELD_XTYPE) !== -1"
          key="10"
          header="集合配置"
        >
          <div class="top">
            <je-button
              class="item"
              type="text"
              @click="
                showModal({
                  typePage: 'ChildFuncFieldSelectFunc',
                  title: '选择功能',
                  ...formState,
                })
              "
              ><i class="jeicon jeicon-function"></i>选择功能</je-button
            >
            <je-button class="item" type="text" @click="debuggerFunc"
              ><i class="fal fa-tools"></i>调试功能</je-button
            >
            <!-- <je-button class="item" type="text" @click="valueConfig"
              ><i class="fal fa-filter"></i>过滤配置</je-button
            > -->
            <je-button class="item" type="text" @click="refreshCache"
              ><i class="fal fa-sync"></i>刷新缓存</je-button
            >
          </div>

          <je-form-item label="配置信息" name="RESOURCEFIELD_CONFIGINFO">
            <je-textarea v-model:value="formState.RESOURCEFIELD_CONFIGINFO" :rows="4" />
          </je-form-item>

          <je-form-item label="&nbsp;" name="RESOURCEFIELD_CONFIGINFO_DESCRIBE">
            <div class="info">
              <h3 class="title"> 配置项信息说明 </h3>
              <p class="p">子功能编码,子功能外键编码。</p>
            </div>
          </je-form-item>

          <!-- <je-form-item>
            <template #label>
              <div class="iconWrap">
                <i
                  class="fas fa-question-circle"
                  style="color: #ebebeb"
                  :style="changeColor(unitTipShow)"
                  @click="
                    clickTipView({
                      title: '过滤条件',
                      unitTpl: FORM_FILTER_UNITPLE,
                    })
                  "
                  @mouseenter="unitTipShow = true"
                  @mouseleave="unitTipShow = false"
                />
                过滤条件
              </div>
            </template>
            <je-textarea v-model:value="formState.RESOURCEFIELD_WHERESQL" :rows="4" />
          </je-form-item> -->

          <!-- otherConfig组件位置 -->
          <OtherConfig
            :key="formState.JE_CORE_RESOURCEFIELD_ID"
            v-model:other-config="formState.RESOURCEFIELD_OTHERCONFIG"
            :xtype="formState.RESOURCEFIELD_XTYPE"
            :func-info="formState"
          />
        </je-collapse-panel>

        <je-collapse-panel
          v-if="['pinyinfield'].indexOf(formState.RESOURCEFIELD_XTYPE) !== -1"
          key="11"
          header="拼音配置"
        >
          <je-form-item label="配置信息" name="RESOURCEFIELD_CONFIGINFO">
            <je-textarea v-model:value="formState.RESOURCEFIELD_CONFIGINFO" :rows="4" />
          </je-form-item>

          <je-form-item label="&nbsp;" name="RESOURCEFIELD_CONFIGINFO_DESCRIBE">
            <div class="info">
              <h3 class="title"> 配置项信息说明 </h3>
              <p class="p">
                字段名~拼音类型,....(根据该字段的值，将配置的字段转换成
                相应拼音类型的字符，可以配置多个字段)。
              </p>
              <br />
              <p class="p"
                >拼音类型：py小写首字母,PY大写首字母,pinyin小写全拼,PINYIN
                大写全拼,PinYin首字母大写全拼。</p
              >
            </div>
          </je-form-item>
        </je-collapse-panel>

        <je-collapse-panel
          v-if="['barfield'].indexOf(formState.RESOURCEFIELD_XTYPE) !== -1"
          key="12"
          header="进度条配置"
        >
          <je-form-item label="配置信息" name="RESOURCEFIELD_CONFIGINFO">
            <je-textarea v-model:value="formState.RESOURCEFIELD_CONFIGINFO" :rows="4" />
          </je-form-item>

          <je-form-item label="&nbsp;" name="RESOURCEFIELD_CONFIGINFO_DESCRIBE">
            <div class="info">
              <h3 class="title"> 配置项信息说明 </h3>
              <p class="p">
                字典编码,1-20(数值范围)~blue(颜色),21-40(数值范围)~ yellow(颜色),.....
              </p>
              <br />
              <p class="p"> 如果需要绑定字典值改变进度条的值，可以配置字典编码 </p>
              <br />
              <p class="p">
                如果想重新分配数值范围所对应的颜色，可以自定义配置，使用
                一种颜色可配置成：1-100~blue
              </p>
              <br />
              <p class="p">
                数值范围：1-100，颜色：blue,yellow,orange,red,green，任何 十六进制色值。
              </p>
            </div>
          </je-form-item>
        </je-collapse-panel>

        <je-collapse-panel
          v-if="['fieldset'].indexOf(formState.RESOURCEFIELD_XTYPE) !== -1"
          key="13"
          header="分组框配置"
        >
          <je-form-item label="分组框列数" name="RESOURCEFIELD_COLS">
            <je-select
              v-model:value="formState.RESOURCEFIELD_COLS"
              config-info="JE_FUNC_LAYOUT_COLS,formState.RESOURCEFIELD_COLS,code,S"
            ></je-select>
          </je-form-item>
          <!-- otherConfig组件位置 -->
          <OtherConfig
            :key="formState.JE_CORE_RESOURCEFIELD_ID"
            v-model:other-config="formState.RESOURCEFIELD_OTHERCONFIG"
            :xtype="formState.RESOURCEFIELD_XTYPE"
          />
        </je-collapse-panel>

        <je-collapse-panel
          v-if="['textcode'].indexOf(formState.RESOURCEFIELD_XTYPE) !== -1"
          key="14"
          header="编号配置"
        >
          <div class="top">
            <je-button
              class="item"
              type="text"
              @click="
                showModal({
                  typePage: 'NumberDesigner',
                  key: 'RESOURCEFIELD_CONFIGINFO',
                  value: formState.RESOURCEFIELD_CONFIGINFO,
                  funcCode: formState.RESOURCEFIELD_FUNCINFO_ID,
                })
              "
            >
              <i class="fal fa-cog"></i>编号设计器
            </je-button>
          </div>

          <je-form-item label="配置信息" name="RESOURCEFIELD_CONFIGINFO">
            <je-textarea v-model:value="formState.RESOURCEFIELD_CONFIGINFO" :rows="4" />
          </je-form-item>
        </je-collapse-panel>

        <je-collapse-panel key="15" header="样式配置">
          <je-form-item label="宽度" name="RESOURCEFIELD_WIDTH">
            <je-input-number
              v-model:value="formState.RESOURCEFIELD_WIDTH"
              style="width: 100%"
              :min="0"
              addon-after="px"
            />
          </je-form-item>

          <je-form-item label="高度" name="RESOURCEFIELD_HEIGHT">
            <je-input-number
              v-model:value="formState.RESOURCEFIELD_HEIGHT"
              style="width: 100%"
              addon-after="px"
              :min="32"
            />
          </je-form-item>

          <je-form-item label="所占列数" name="RESOURCEFIELD_COLSPAN">
            <je-select
              v-model:value="formState.RESOURCEFIELD_COLSPAN"
              config-info="JE_FUNC_LAYOUT_COLS,formState.RESOURCEFIELD_COLSPAN,code,S"
            ></je-select>
          </je-form-item>

          <je-form-item label="所属组" name="RESOURCEFIELD_GROUPNAME">
            <je-select
              v-model:value="formState.RESOURCEFIELD_GROUPNAME"
              allow-clear
              placeholder="请选择"
              :options="funcStore.groupFields"
            />
          </je-form-item>

          <je-form-item label="字段样式" name="RESOURCEFIELD_FIELDCLS">
            <je-input v-model:value="formState.RESOURCEFIELD_FIELDCLS" />
          </je-form-item>

          <je-form-item label="数值颜色" name="RESOURCEFIELD_FIELDCOLOR">
            <je-color v-model:value="formState.RESOURCEFIELD_FIELDCOLOR" />
          </je-form-item>

          <je-form-item label="标签颜色" name="RESOURCEFIELD_LABELCOLOR">
            <je-color v-model:value="formState.RESOURCEFIELD_LABELCOLOR" />
          </je-form-item>
        </je-collapse-panel>

        <je-collapse-panel key="16" header="验证配置">
          <je-form-item label="正则表达式" name="RESOURCEFIELD_REGEX">
            <je-select
              v-model:value="formState.RESOURCEFIELD_REGEX"
              allow-clear
              placeholder="请选择"
              editable
              config-info="JE_FUNC_JSREGEX, formState.RESOURCEFIELD_REGEX, code, S"
              @change="changeRegex"
            >
            </je-select>
          </je-form-item>

          <je-form-item label="正则提示信息" name="RESOURCEFIELD_REGEXTEXT">
            <je-input v-model:value.trim="formState.RESOURCEFIELD_REGEXTEXT" />
          </je-form-item>

          <je-form-item name="RESOURCEFIELD_VTYPE">
            <template #label>
              <div class="iconWrap">
                <i
                  class="fas fa-bolt"
                  :style="`color:${formState.RESOURCEFIELD_VTYPEFN ? '#F4CE4A' : '#8d98ab'}`"
                  @click="clickCustom"
                ></i>
                自定义验证</div
              >
            </template>
            <je-select
              v-model:value="formState.RESOURCEFIELD_VTYPE"
              allow-clear
              placeholder="请选择"
              config-info="JE_FUNC_FIELD_VTYPES,formState.RESOURCEFIELD_VTYPE,code,S"
            />
          </je-form-item>

          <je-form-item label="内容最大长度" name="RESOURCEFIELD_MAXLENGTH">
            <je-input-number
              v-model:value="formState.RESOURCEFIELD_MAXLENGTH"
              :min="0"
              style="width: 100%"
            >
              <template #addonAfter> 字 </template>
            </je-input-number>
          </je-form-item>
        </je-collapse-panel>

        <je-collapse-panel key="17" header="函数配置">
          <je-form-item name="RESOURCEFIELD_BINDING">
            <template #label>
              <div class="iconWrap">
                <i
                  class="fas fa-bolt"
                  :style="`color:${formState.RESOURCEFIELD_BINDINGFN ? '#F4CE4A' : '#8d98ab'}`"
                  @click="handleDefaultJs('RESOURCEFIELD_BINDINGFN')"
                ></i>
                绑定表达式</div
              >
            </template>
            <je-input v-model:value.trim="formState.RESOURCEFIELD_BINDING" />
          </je-form-item>

          <je-form-item name="RESOURCEFIELD_INTERPRETER">
            <template #label>
              <div class="iconWrap">
                <i
                  class="fas fa-bolt"
                  :style="`color:${formState.RESOURCEFIELD_INTERPRETERFN ? '#F4CE4A' : '#8d98ab'}`"
                  @click="handleDefaultJs('RESOURCEFIELD_INTERPRETERFN')"
                ></i>
                显隐表达式
              </div>
            </template>

            <div class="inputWrap">
              <je-input v-model:value.trim="formState.RESOURCEFIELD_INTERPRETER">
                <template #suffix>
                  <i
                    class="setIcon fal fa-cog"
                    @click="
                      showExpress({
                        type: 'ExpressionDesigner',
                        key: 'RESOURCEFIELD_INTERPRETER',
                        value: formState.RESOURCEFIELD_INTERPRETER,
                        funcId: formState.RESOURCEFIELD_FUNCINFO_ID,
                      })
                    "
                  ></i>
                </template>
              </je-input>
            </div>
          </je-form-item>

          <je-form-item name="RESOURCEFIELD_READONLYEXP">
            <template #label>
              <div class="iconWrap">
                <i
                  class="fas fa-bolt"
                  :style="`color:${formState.RESOURCEFIELD_READONLYEXPFN ? '#F4CE4A' : '#8d98ab'}`"
                  @click="handleDefaultJs('RESOURCEFIELD_READONLYEXPFN')"
                ></i>
                只读表达式
              </div>
            </template>

            <div class="inputWrap">
              <je-input v-model:value.trim="formState.RESOURCEFIELD_READONLYEXP">
                <template #suffix>
                  <i
                    class="setIcon fal fa-cog"
                    @click="
                      showExpress({
                        type: 'ExpressionDesigner',
                        key: 'RESOURCEFIELD_READONLYEXP',
                        value: formState.RESOURCEFIELD_READONLYEXP,
                        funcId: formState.RESOURCEFIELD_FUNCINFO_ID,
                      })
                    "
                  ></i>
                </template>
              </je-input>
            </div>
          </je-form-item>

          <je-form-item name="RESOURCEFIELD_REQUIRE_EXP">
            <template #label>
              <div class="iconWrap">
                <!-- <i
                    v-if="formState.RESOURCEFIELD_ALLOWBLANKEXPFN"
                    class="fal fa-function"
                    style="color: #239f75; font-size: 14px; margin-right: 1px"
                  ></i> -->
                <i
                  class="fas fa-bolt"
                  :style="`color:${formState.RESOURCEFIELD_REQUIRE_EXPFN ? '#F4CE4A' : '#8d98ab'}`"
                  @click="handleDefaultJs('RESOURCEFIELD_REQUIRE_EXPFN')"
                ></i>
                必填表达式
              </div>
            </template>

            <div class="inputWrap">
              <je-input v-model:value.trim="formState.RESOURCEFIELD_REQUIRE_EXP">
                <template #suffix>
                  <i
                    class="fal fa-cog"
                    @click="
                      showExpress({
                        type: 'ExpressionDesigner',
                        key: 'RESOURCEFIELD_REQUIRE_EXP',
                        value: formState.RESOURCEFIELD_REQUIRE_EXP,
                        funcId: formState.RESOURCEFIELD_FUNCINFO_ID,
                      })
                    "
                  ></i>
                </template>
              </je-input>
            </div>
          </je-form-item>

          <je-form-item name="RESOURCEFIELD_ENABLEEXP">
            <template #label>
              <div class="iconWrap">
                <!-- <i
                    v-if="formState.RESOURCEFIELD_ENABLEEXPFN"
                    class="fal fa-function"
                    style="color: #239f75; font-size: 14px; margin-right: 1px"
                  ></i> -->
                <i
                  class="fas fa-bolt"
                  :style="`color:${formState.RESOURCEFIELD_ENABLEEXPFN ? '#F4CE4A' : '#8d98ab'}`"
                  @click="handleDefaultJs('RESOURCEFIELD_ENABLEEXPFN')"
                ></i>
                可选表达式
              </div>
            </template>

            <div class="inputWrap">
              <je-input v-model:value.trim="formState.RESOURCEFIELD_ENABLEEXP" />
              <!-- <i class="setIcon fal fa-cog"></i> -->
            </div>
          </je-form-item>

          <je-form-item label="可选提示语" name="RESOURCEFIELD_ENABLETIP">
            <je-input v-model:value.trim="formState.RESOURCEFIELD_ENABLETIP" />
          </je-form-item>
        </je-collapse-panel>

        <je-collapse-panel key="18" header="提示配置">
          <je-form-item name="RESOURCEFIELD_EMPTYTEXT">
            <template #label>
              <div class="iconWrap">
                <i
                  class="fas fa-question-circle"
                  style="color: #ebebeb"
                  :style="changeColor(unitTipShow)"
                  @click="
                    clickTipView({
                      title: '输入提示',
                      unitTpl: INPUT_UNITPLE,
                    })
                  "
                  @mouseenter="unitTipShow = true"
                  @mouseleave="unitTipShow = false"
                />
                输入提示
              </div>
            </template>
            <je-textarea v-model:value="formState.RESOURCEFIELD_EMPTYTEXT" :rows="4" />
          </je-form-item>

          <je-form-item name="RESOURCEFIELD_HELP">
            <template #label>
              <div
                class="iconWrap"
                @click="
                  showModal({
                    typePage: 'HelpEditorHtml',
                    title: '帮助提示',
                    key: 'RESOURCEFIELD_HELP',
                    value: formState.RESOURCEFIELD_HELP,
                  })
                "
              >
                <i
                  class="jeicon jeicon-from"
                  :style="`color:${
                    formState.RESOURCEFIELD_HELP ? '#F4CE4A' : '#8d98ab'
                  };font-size:14px`"
                ></i>
                帮助提示
              </div>
            </template>
            <je-textarea v-model:value="formState.RESOURCEFIELD_HELP" :rows="4" />
          </je-form-item>

          <je-form-item label="帮助提示宽" name="RESOURCEFIELD_HELP_TIP_W">
            <je-input-number
              v-model:value="formState.RESOURCEFIELD_HELP_TIP_W"
              addon-after="px"
              :min="0"
              style="width: 100%"
            />
          </je-form-item>

          <je-form-item label="帮助提示高" name="RESOURCEFIELD_HELP_TIP_H">
            <je-input-number
              v-model:value="formState.RESOURCEFIELD_HELP_TIP_H"
              addon-after="px"
              :min="0"
              style="width: 100%"
            />
          </je-form-item>
        </je-collapse-panel>

        <je-collapse-panel key="19">
          <template #header>
            <div class="iconWrap">
              <i
                class="fas fa-question-circle"
                style="color: #ebebeb"
                :style="changeColor(suffixTipShow)"
                @click.stop="
                  clickTipView({
                    title: '后缀配置',
                    unitTpl: INPUT_SUFFIX,
                  })
                "
                @mouseenter="suffixTipShow = true"
                @mouseleave="suffixTipShow = false"
              />
              后缀配置
            </div>
          </template>
          <je-table
            ref="xTable"
            class="table"
            border
            :stripe="false"
            show-overflow="ellipsis"
            keep-source
            sync-resize
            auto-resize
            align="center"
            height="250"
            :edit-rules="validRules"
            :scroll-y="{ mode: 'wheel' }"
            :edit-config="{
              trigger: 'click',
              showStatus: false,
              mode: 'cell',
            }"
            :data="tableFields.RESOURCEFIELD_UNITLISTTPL"
            size="mini"
            @edit-closed="editClosedEvent"
          >
            <je-table-column width="40" align="center">
              <template #header>
                <i
                  style="font-size: 16px; cursor: pointer"
                  class="fal fa-plus"
                  @click="addColumn"
                ></i>
              </template>
              <template #default="{ rowIndex }">
                <i
                  style="font-size: 16px; cursor: pointer"
                  class="fal fa-times"
                  @click="deleteColumn(rowIndex)"
                ></i>
              </template>
            </je-table-column>
            <je-table-column
              field="text"
              title="文字"
              :edit-render="{ autofocus: '.ant-input' }"
              min-width="90"
            >
              <template #edit="{ row }">
                <je-input v-model:value="row.text" />
              </template>
            </je-table-column>
            <je-table-column field="icon" title="图标" :edit-render="{}" min-width="90">
              <template #edit="{ row }">
                <je-icon v-model:value="row.icon"></je-icon>
              </template>
            </je-table-column>
            <je-table-column field="showWays" title="显示方式" :edit-render="{}" width="120">
              <template #default="{ row }">
                {{ getSelectLabel(row.showWays, showWaysOptions) }}
              </template>
              <template #edit="{ row }">
                <je-select v-model:value="row.showWays" allow-clear :options="showWaysOptions">
                </je-select>
              </template>
            </je-table-column>
            <je-table-column title="方法" width="50" align="center">
              <template #default="{ row }">
                <i
                  class="fas fa-bolt"
                  :style="changeFunctionTextColor(row)"
                  style="cursor: pointer"
                  @click="clickFunction(row)"
                ></i>
              </template>
            </je-table-column>
            <je-table-column title="文字" field="textColor" width="50" align="center">
              <template #default="{ row }">
                <je-color v-model:value="row.textColor" theme="mini" />
              </template>
            </je-table-column>
            <je-table-column field="bgColor" title="背景" width="50" align="center">
              <template #default="{ row }">
                <je-color v-model:value="row.bgColor" theme="mini" />
              </template>
            </je-table-column>
            <je-table-column field="textfold" title="加粗" width="50" align="center" type="switch">
            </je-table-column>
          </je-table>
        </je-collapse-panel>

        <je-collapse-panel key="20" header="其他配置">
          <!-- <je-form-item label="其他语种">
            <je-textarea v-model:value="formState.RESOURCEFIELD_NAME_EN" :rows="4" />
          </je-form-item> -->

          <je-form-item label="备注" name="RESOURCEFIELD_DESCRIPTION">
            <je-textarea v-model:value="formState.RESOURCEFIELD_DESCRIPTION" :rows="4" />
          </je-form-item>
        </je-collapse-panel>
      </je-collapse>
    </je-form>

    <div v-if="modalOption.modalFlag">
      <component
        :is="modalOption.activeModal"
        :visble="modalOption.modalFlag"
        :record-data="modalOption.recordData"
        :record="modalOption.recordData"
        :basic-fields="modalOption.basicFields"
        :table-data="modalOption.tableData"
        @changeModal="changeModal"
        @btnClick="btnClick"
      ></component>
    </div>

    <!-- 弹窗面板 -->
    <div v-if="modalShow">
      <je-tip-panel
        :visble="modalShow"
        :mouse-now-data="mouseNowData"
        @changeTipShow="modalShow = false"
      ></je-tip-panel>
    </div>
    <!-- 弹窗面板 -->
  </div>
</template>

<script>
  import {
    ref,
    reactive,
    toRefs,
    defineComponent,
    onMounted,
    defineAsyncComponent,
    watch,
    onBeforeMount,
    nextTick,
  } from 'vue';
  import { Tooltip } from 'ant-design-vue';
  import {
    Collapse,
    Grid,
    Radio,
    Color,
    Modal,
    Form,
    Input,
    Checkbox,
    Button,
    InputNumber,
    Switch,
    Select,
    Icon,
  } from '@jecloud/ui';
  import {
    ListFieldConfigGet as FieldConfigGet,
    DoFormUpdateList,
    CleanFunctionCache as FieldConfigRefreshCache,
    getData as FieldConfigFuncDetail,
    loadTabelColumn,
    getData as FuncDetail,
    clearCache,
    getDicConfigInfo,
  } from '@/api/index';

  import FormFunction from '@/views/system/form/form-function.vue';

  import { FORM_FIELD_CONFIG_COMPONENTS } from '@/helper/form-field-config-components';
  import { listenerEditorModal, ListenerExpressModal } from '@/helper/index.js';
  import { showFuncQuerys } from '@jecloud/func';
  import { INPUT_UNITPLE, FORM_FILTER_UNITPLE, INPUT_SUFFIX } from '@/helper/tip-constant';

  import { SelectWindow, showFunc } from '@jecloud/func';

  import { isEmpty, encode, getDDCache, isNotEmpty } from '@jecloud/utils';

  import VueEvent from '@/helper/event';

  import { ListFieldEditorModal } from '@/helper/index.js';

  import OtherConfig from '@/components/other-config/index.vue';
  import { useFormField } from '../hooks/use-form-field';
  // import { useInjectForm } from '@/hooks/context';

  import { useFuncConfig } from '@/hooks/use-func-config';
  const useForm = Form.useForm;
  export default defineComponent({
    name: 'FormEditFieldConfig',
    components: {
      JeTooltip: Tooltip,
      JeButton: Button,
      JeTable: Grid,
      JeSwitch: Switch,
      JeTableColumn: Grid.Column,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
      JeInputNumber: InputNumber,
      JeTextarea: Input.TextArea,
      JeSelect: Select,
      JeSelectOption: Select.Option,
      JeCheckbox: Checkbox,
      JeCheckboxGroup: Checkbox.Group,
      JeRadioGroup: Radio.Group,
      JeRadioButton: Radio.Button,
      JeCollapse: Collapse,
      JeCollapsePanel: Collapse.Panel,
      JeColor: Color,
      JeIcon: Icon,
      OtherConfig,
      ...FORM_FIELD_CONFIG_COMPONENTS,
      ListEditFieldConfig: defineAsyncComponent({
        delay: 1000 /* 在显示加载组件之前提早毫秒 */,
        loader: () => import('../../list-field-config/components/edit-field-config.vue'),
      }),
      FormFunction,
      JeTipPanel: defineAsyncComponent(() => import('@/components/tip-view/index.vue')),
    },
    props: {
      funcBean: Object,
      recordData: {
        type: Object,
        default() {
          return {};
        },
      },
      drawer: Boolean,
      formDesign: Boolean,
      isShowFieldConfig: Boolean,
      tableData: Array,
    },
    emits: [
      'changeEditFieldConfig',
      'changeEditFieldWidth',
      'hideEditFieldConfig',
      'updateEditFieldConfig',
      'update:recordData',
    ],
    setup(props, context) {
      const { emit, expose } = context;
      const { showFuncConfig } = useFuncConfig();
      const {
        funcStore,
        formState,
        tableFields,
        showColumnConfig,
        getTableFieldValues,
        addTableFieldValue,
        removeTableFieldValue,
        dicGridStore,
        addDicColumn,
        deleteDicColumn,
        dicType,
      } = useFormField({ props, context });
      const listFiledItem = ref({});
      const fieldDicConfigInfo = ref('');
      const state = reactive({
        isShowFieldConfig: props.isShowFieldConfig,
        tableCode: props.funcBean.FUNCINFO_TABLENAME,
        modalObj: '', //  点击激活配置面板之后的弹窗对象
        from: 'form',
        formRef: ref(),
        showSaveButton: ref(false),
        unitTipShow: false,
        suffixTipShow: false,
        modalShow: false,
        mouseNowData: {},
        attachArr: [], // 依附字段的数据
        labelCol: {
          span: 5,
        },
        wrapperCol: {
          span: 19,
        },
        showWaysOptions: [
          {
            value: 'text',
            label: '文字',
          },
          {
            value: 'icon',
            label: '图标',
          },
          {
            value: 'icon-text',
            label: '图标加文字',
          },
        ],
        validRules: ref({}),

        activeKey: [],
        rules: {
          RESOURCEFIELD_NAME: [{ required: true, message: '请输入名称' }],
        },
        INPUT_UNITPLE,
        INPUT_SUFFIX,
        FORM_FILTER_UNITPLE,
        fieldsetArr: [],
        xTable: ref(),
        filesLimits: ref([
          {
            code: 'upload',
            text: '上传',
            active: true,
          },
          {
            code: 'preview',
            text: '预览',
            active: true,
          },
          {
            code: 'open',
            text: '打开',
            active: true,
          },
          {
            code: 'download',
            text: '下载',
            active: false,
          },
          {
            code: 'build',
            text: '打包',
            active: false,
          },
          {
            code: 'delete',
            text: '删除',
            active: false,
          },
          {
            code: 'empty',
            text: '清空',
            active: false,
          },
          {
            code: 'attr',
            text: '属性',
            active: true,
          },
        ]),
        basicFields: [],
        isFromDesign: props.formDesign, // 是否从表单界面调用这个组件
      });
      const { validateInfos, validate } = useForm(formState, state.rules, {
        onValidate: (...args) => console.log(...args),
      });
      const modalOption = reactive({
        modalFlag: false, // 默认modal都是隐藏的false
        activeModal: '', // 默认没有激活的弹窗类型
      });
      watch(
        () => state.attachArr,
        (val) => {
          state.attachArr = val;
        },
        {
          deep: true,
        },
      );
      const methods = {
        editClosedEvent() {
          const data = state.xTable.getTableData().tableData;
          formState.value['RESOURCEFIELD_UNITLISTTPL'] = (data && encode(data)) ?? '';
          console.log(data, formState.value['RESOURCEFIELD_UNITLISTTPL']);
        },
        // 改变正则表达式
        changeRegex(value, options) {
          formState.value.RESOURCEFIELD_REGEX = value;
          if (!value) {
            formState.value.RESOURCEFIELD_REGEXTEXT = '';
            return false;
          }

          if (JSON.stringify(options) == '{}' || !options) {
            !formState.value.RESOURCEFIELD_REGEXTEXT &&
              (formState.value.RESOURCEFIELD_REGEXTEXT = '请输入正确数据');
            return false;
          }
          formState.value.RESOURCEFIELD_REGEXTEXT = `请输入${options.label}`;
        },
        getSelectLabel(value, list, valueProp = 'value', labelField = 'label') {
          const item = list.find((item) => item[valueProp] === value);
          return item ? item[labelField] : null;
        },
        changeType(key) {
          /*if (key == 'textarea' && isEmpty(formState.value.RESOURCEFIELD_HEIGHT)) {
            formState.value.RESOURCEFIELD_HEIGHT = 90;
          }*/
        },
        // 后缀添加的时候
        addColumn() {
          const record = {
            text: '',
            showWays: 'text',
            bgColor: '',
            textColor: '',
            textfold: '0',
            functionText: '',
            icon: '',
          };
          addTableFieldValue({ key: 'RESOURCEFIELD_UNITLISTTPL', data: record });
        },

        // 点击默认值后的icon
        clickBookIcon() {
          const { RESOURCEFIELD_CONFIGINFO, RESOURCEFIELD_CODE } = formState.value;
          // 字典编码
          const ddCode = RESOURCEFIELD_CONFIGINFO?.split(',')[0];
          // 字典信息
          const ddInfo = getDDCache(ddCode);

          if (!ddCode) {
            Modal.alert('填写配置项里的字典信息再选择！', 'info');
            return false;
          }
          if (!ddInfo) {
            Modal.alert('未找到字典信息，请检查配置项！', 'info');
            return false;
          }
          if (!['TREE', 'LIST'].includes(ddInfo.type)) {
            Modal.alert('只有列表字典、树形字典可以选择字典项默认值！', 'info');
            return false;
          }
          // 获取是单选还是多选
          const isMultiple = RESOURCEFIELD_CONFIGINFO?.split(',')[3] || 'S';
          SelectWindow.show({
            title: '字典项',
            configInfo: `${ddCode},,,${isMultiple}`,
            type: 'tree',
            callback: ({ rows }) => {
              // 处理当前选择的数据
              const value = [];
              if (rows && rows.length) {
                rows.map((item) => {
                  value.push(RESOURCEFIELD_CODE.endsWith('_NAME') ? item.text : item.code);
                });
                formState.value.RESOURCEFIELD_VALUE = value.join(',');
              }
            },
          });
        },
        // 显隐藏表达式
        showExpress(obj) {
          ListenerExpressModal({
            ...obj,
            callback: (obj) => {
              methods.changeModal(obj);
            },
          });
        },
        changeFunctionTextColor(row) {
          if (row.functionText) {
            return 'color: #F4CE4A';
          }
          return 'color: #8d98ab';
        },
        // 自定义
        clickCustom() {
          const { RESOURCEFIELD_CODE, RESOURCEFIELD_FUNCINFO_ID } = formState.value;
          listenerEditorModal({
            eventType: 'default',
            funcId: RESOURCEFIELD_FUNCINFO_ID,
            funcCode: RESOURCEFIELD_CODE,
            title: '自定义验证(Ctrl+S保存)',
            defaultCode: 'expression,validator',
            eventInfo: formState.value.RESOURCEFIELD_VTYPEFN,
            callback: (obj) => {
              Modal.message('保存成功', 'success');
              formState.value.RESOURCEFIELD_VTYPEFN = obj.eventInfo;
            },
          });
        },
        // 点击默认值
        handleDefaultJs(key, flag) {
          const { RESOURCEFIELD_CODE, RESOURCEFIELD_FUNCINFO_ID } = formState.value;
          listenerEditorModal({
            funcId: RESOURCEFIELD_FUNCINFO_ID,
            funcCode: RESOURCEFIELD_CODE,
            eventType: 'default',
            defaultCode: !flag ? 'expression,common' : '',
            eventInfo: formState.value[key],
            callback: (obj) => {
              Modal.message('保存成功', 'success');
              formState.value[key] = obj.eventInfo;
            },
          });
        },
        // 点击事件编辑
        handleJs() {
          const { JE_CORE_RESOURCEFIELD_ID, RESOURCEFIELD_XTYPE } = formState.value;
          // 获取功能的相关信息
          const { FUNCINFO_FUNCCODE, FUNCINFO_FUNCNAME, id } = props.funcBean;
          listenerEditorModal({
            funcId: id,
            funcCode: FUNCINFO_FUNCCODE,
            funcName: FUNCINFO_FUNCNAME,
            onId: JE_CORE_RESOURCEFIELD_ID,
            fieldType: RESOURCEFIELD_XTYPE,
            eventType: 'field',
            title: '字段事件',
            callback: (obj) => {
              formState.value.RESOURCEFIELD_JSLISTENER = obj.data;
            },
          });
        },
        changeJsListener(data) {
          const parseData = data ? JSON.parse(data) : [];
          let eventType = false;
          parseData.forEach((item) => {
            if (item.fire == '1') {
              eventType = true;
            }
          });
          return eventType;
        },
        // 点击后缀的方法
        clickFunction(row) {
          const { RESOURCEFIELD_CODE, RESOURCEFIELD_FUNCINFO_ID } = formState.value;
          listenerEditorModal({
            eventType: 'default',
            title: '方法(Ctrl+S保存)',
            funcId: RESOURCEFIELD_FUNCINFO_ID,
            funcCode: RESOURCEFIELD_CODE,
            defaultCode: 'expression,suffix',
            eventInfo: row.functionText,
            callback: (obj) => {
              Modal.message('保存成功', 'success');
              row.functionText = obj.eventInfo;
            },
          });
        },
        // 点击列表激活
        clickListFiled() {
          showColumnConfig({ source: 'formField', props: { isShowFieldConfig: true } });
        },
        getData() {
          const params = {
            tableCode: 'JE_CORE_RESOURCECOLUMN',
            funcId: formState.value.RESOURCEFIELD_FUNCINFO_ID,
            limt: -1,
            j_query: JSON.stringify({
              custom: [
                {
                  code: 'RESOURCECOLUMN_FUNCINFO_ID',
                  value: formState.value.RESOURCEFIELD_FUNCINFO_ID,
                  type: '=',
                  cn: 'and',
                },
                {
                  code: 'RESOURCECOLUMN_CODE',
                  value: formState.value.RESOURCEFIELD_CODE,
                  type: '=',
                  cn: 'and',
                },
              ],
            }),
          };

          FieldConfigGet(params)
            .then((res) => {
              listFiledItem.value = res.data.rows;
              if (res.data.rows.length) {
                ListFieldEditorModal({
                  recordData: listFiledItem.value[0],
                  from: 'formActive',
                  title: '列表字段配置',

                  callback: (obj) => {},
                });
              } else {
                Modal.alert('本字段无对应的列表字段！', 'warning');
                return false;
              }
            })
            .catch((error) => {
              // Modal.alert(error.message, 'error');
            });
        },
        changeFilesActive(item, index) {
          state.filesLimits[index].active = !item.active;
          // 改变多附件的权限
        },
        showModal(obj) {
          //数据字典的带值配置
          if (obj.typePage == 'DataDictionaryValueConfig') {
            if (isEmpty(formState.value.RESOURCEFIELD_CONFIGINFO)) {
              return Modal.alert('请先选择字典！', 'error');
            }
          }
          modalOption.key = obj.key;
          modalOption.modalFlag = true;
          modalOption.activeModal = obj.typePage;
          // modalOption.recordData = formState.value[obj.key];
          modalOption.recordData = obj;
          modalOption.basicFields = obj.basicFields;
          modalOption.tableData = props.tableData;
        },
        // 查看字典
        checkDic() {
          const { RESOURCEFIELD_CONFIGINFO } = formState.value;
          if (!RESOURCEFIELD_CONFIGINFO) {
            Modal.alert('请先选择字典！', 'info');
            return false;
          }
          const ddCode = RESOURCEFIELD_CONFIGINFO.split(',')[0];
          if (isNotEmpty(ddCode)) {
            const dicData = getDDCache(ddCode);
            if (['LIST', 'TREE'].indexOf(dicData?.type) != -1) {
              showFunc('JE_CORE_DICTIONARYITEM', {
                querys: [
                  {
                    code: 'DICTIONARYITEM_DICTIONARY_ID',
                    type: '=',
                    value: dicData.id,
                  },
                ],
                bean: {
                  DICTIONARYITEM_DICTIONARY_ID: dicData.id,
                },
                params: {
                  parentId: dicData.id,
                  parentType: dicData.type,
                },
                modalOptions: {
                  class: 'je-function-dicfunc',
                  title: formState.value.RESOURCEFIELD_NAME,
                  buttons: [
                    {
                      text: '更新缓存',
                      type: 'primary',
                      closeable: true,
                      handler: ({ button }) => {
                        button.loading = true;
                        clearCache({ ddCode })
                          .then(() => {
                            Modal.notice('更新完成，请刷新功能！', 'success');
                            button.loading = false;
                          })
                          .catch((e) => {
                            Modal.alert(e.meaasge, 'error');
                            button.loading = false;
                          });
                        return false;
                      },
                    },
                  ],
                },
              });
            } else {
              Modal.alert('仅可查看列表和树形字典！', 'info');
            }
          } else {
            Modal.alert('请先选择字典！', 'info');
          }
        },
        //获得功能数据
        async getFuncDetail(funcCode) {
          const params = {
            tableCode: 'JE_CORE_FUNCINFO',
            limit: 1,
            queryColumns: 'JE_CORE_FUNCINFO_ID,FUNCINFO_FUNCNAME',
            j_query: JSON.stringify({
              custom: [
                {
                  code: 'FUNCINFO_FUNCCODE',
                  value: funcCode,
                  type: '=',
                  cn: 'and',
                },
              ],
            }),
          };

          let result = await FuncDetail(params).then((res) => {
            if (res.length === 0) {
              Modal.alert('功能不存在！');
            } else {
              return res[0].JE_CORE_FUNCINFO_ID;
            }
          });

          return result;
        },
        valueConfig(obj) {
          // 这边特别注意的是，单选、下拉框、复选框、树形选择目标功能使用固定的字典项功能｜｜ 人员选择
          // 所以在调用valueConfig的时候，funcId要取obj里面的值，目前是写死的，后期优化
          // 对于关联查询而言，要通过功能编码获取功能code
          if (obj.type == 'InquireChooseValueConfig') {
            const { RESOURCEFIELD_CONFIGINFO } = formState.value;
            if (!RESOURCEFIELD_CONFIGINFO || !RESOURCEFIELD_CONFIGINFO.split(',')[0]) {
              Modal.alert('请先配置带值配置中的目标功能！', 'info');
              return false;
            }
            const funcCode = RESOURCEFIELD_CONFIGINFO.split(',')[0];
            methods.getFuncDetail(funcCode).then((code) => {
              // sqlEditorModal({
              //   value: formState.value.RESOURCEFIELD_WHERESQL,
              //   funcCode: formState.value.FUNCINFO_FUNCCODE,
              //   funcId: code,
              //   callback: (obj) => {
              //     formState.value.RESOURCEFIELD_WHERESQL = obj;
              //   },
              // });
              showFuncQuerys({
                value: formState.value.RESOURCEFIELD_WHERESQL,
                funcId: code,
                callback: (val) => {
                  formState.value.RESOURCEFIELD_WHERESQL = val;
                },
              });
            });

            return false;
          }
          showFuncQuerys({
            value: formState.value.RESOURCEFIELD_WHERESQL,
            funcId: obj.funcId || formState.value.RESOURCEFIELD_FUNCINFO_ID,
            callback: (val) => {
              formState.value.RESOURCEFIELD_WHERESQL = val;
            },
          });
          // sqlEditorModal({
          //   value: formState.value.RESOURCEFIELD_WHERESQL,
          //   funcCode: formState.value.FUNCINFO_FUNCCODE,
          //   funcId: obj.funcId || formState.value.RESOURCEFIELD_FUNCINFO_ID,
          //   callback: (obj) => {
          //     formState.value.RESOURCEFIELD_WHERESQL = obj;
          //   },
          // });
        },
        changeModal(obj) {
          obj.value && (formState.value[obj.key] = obj.value);
          obj.change && (formState.value[obj.key] = obj.value);
          modalOption.modalFlag = obj.visible;

          let arr = [
            'InquireChooseValueConfig',
            'PeopleChooseValueConfig',
            'DataDictionaryValueConfig',
          ];
          if (arr.indexOf(obj.type) !== -1) {
            for (let item in obj.data) {
              formState.value[item] = obj.data[item];
            }
          }

          let arr2 = ['DataDictionaryHighConfig'];
          if (arr2.indexOf(obj.type) !== -1) {
            formState.value.RESOURCEFIELD_OTHERCONFIG = obj.data.RESOURCEFIELD_OTHERCONFIG;
          }

          let arr3 = ['ChildFuncFieldSelectFunc'];
          if (arr3.indexOf(obj.type) !== -1) {
            formState.value.RESOURCEFIELD_CONFIGINFO = obj.data.RESOURCEFIELD_CONFIGINFO;
          }
        },

        btnClick(obj) {
          modalOption.modalFlag = false;

          if (obj.type === 'ok') {
            formState.value[modalOption.key] = obj.value;
          }
        },
        deleteColumn(index) {
          removeTableFieldValue({ key: 'RESOURCEFIELD_UNITLISTTPL', index });
        },

        debuggerFunc() {
          const value = formState.value.RESOURCEFIELD_CONFIGINFO;
          if (!value) {
            Modal.alert('请输入配置信息');
            return false;
          }

          const params = {
            tableCode: 'JE_CORE_FUNCINFO',
            j_query: JSON.stringify({
              custom: [
                {
                  code: 'FUNCINFO_FUNCCODE',
                  value: value.split(',')[0],
                  type: '=',
                  cn: 'and',
                },
              ],
            }),
            limit: 1,
          };

          FieldConfigFuncDetail(params)
            .then((res) => {
              if (res.length === 0) {
                Modal.alert('功能不存在！');
              } else {
                // modalOption.recordData = res[0];
                // modalOption.modalFlag = true;
                // modalOption.activeModal = 'FormFunction';
                showFuncConfig({ funcId: res[0].JE_CORE_FUNCINFO_ID });
              }
            })
            .catch((err) => {
              Modal.alert(err.message, 'error');
            });
        },

        refreshCache() {
          const value = formState.value.RESOURCEFIELD_CONFIGINFO;
          if (!value) {
            Modal.alert('请输入配置信息');
            return false;
          }
          const funcCode = value.split(',') || [];
          FieldConfigRefreshCache({
            funcCode: funcCode[0],
            // tableCode: funcStore.funcBean.FUNCINFO_TABLENAME,
          })
            .then((res) => {
              Modal.message(res.message, 'success');
            })
            .catch((error) => {
              Modal.alert(error.message, 'error');
            });
        },

        onClose() {
          state.visible = false;
          emit('changeEditFieldConfig', { visible: false, isRefresh: true });
          // 表单的界面设计调用
          emit('hideEditFieldConfig');
        },
        handleSave() {
          // const strData = JSON.parse(JSON.stringify(formState.value));
          Object.assign(formState.value, getTableFieldValues());
          const keyArr = ['index', 'type', 'hidden', 'groupId', 'id'];
          // console.log(strData);
          // Object.keys(strData).forEach((key) => {
          //   if (keyArr.includes(key)) {
          //     delete strData[key];
          //   }
          //   if (key != 'SY_ORDERINDEX') {
          //     strData[key] = strData[key] || '';
          //   }
          // });
          Object.keys(formState.value).forEach((key) => {
            if (keyArr.includes(key)) {
              delete formState.value[key];
            }
            if (key != 'SY_ORDERINDEX') {
              formState.value[key] = formState.value[key] || '';
            }
            if (formState.value[key] === undefined) {
              formState.value[key] = '';
            }
          });
          // const item = state.arrFuncJsRegEx.find(
          //   (item) =>
          //     formState.value.RESOURCEFIELD_REGEX == item.value ||
          //     formState.value.RESOURCEFIELD_REGEX == item.label,
          // );
          // if (item) {
          //   formState.value.RESOURCEFIELD_REGEX = item.value;
          // }
          const params = {
            tableCode: 'JE_CORE_RESOURCEFIELD',
            funcId: formState.value.RESOURCEFIELD_FUNCINFO_ID,
            strData: JSON.stringify([formState.value]),
          };
          return DoFormUpdateList(params)
            .then((res) => {
              emit('changeEditFieldConfig', { visible: false, isRefresh: true });
              Modal.message(res.message, 'success');
              VueEvent.emit('refreshFormFieldConfig');
              if (state.isFromDesign) {
                // 表单的界面设计调用 不提交数据
                emit('updateEditFieldConfig', formState.value);
              }
            })
            .catch((err) => {
              Modal.alert(err.message, 'error');
            });
        },

        onSubmit() {
          return validate()
            .then(methods.handleSave)
            .catch((error) => {
              console.log('error', error);
            });
        },

        changeColor(flag) {
          if (flag) {
            return 'cursor:pointer;color: #3265F5';
          }
          return 'cursor:pointer;';
        },

        clickTipView(obj) {
          // state.modalShow = true;
          // state.mouseNowData = obj;
          Modal.alert({
            content: obj.unitTpl,
            title: obj.title,
            icon: 'fal fa-info-circle',
            status: 'info',
            width: '460',
          });
        },

        //弹出字典选择
        showDicModel() {
          const xtype = formState.value.RESOURCEFIELD_XTYPE;
          let querys = [];
          if (['treessfield'].indexOf(xtype) == -1) {
            querys = [{ code: 'DICTIONARY_DDCODE', type: '!=', value: 'SQL_TREE', cn: 'and' }];
          }
          SelectWindow.show({
            title: '字典',
            configInfo: 'JE_CORE_DICTIONARY,,,S',
            type: 'grid',
            querys: querys,
            callback: ({ rows }) => {
              if (rows && rows.length > 0) {
                // const code = formState.value.RESOURCEFIELD_CODE;
                // const xtype = formState.value.RESOURCEFIELD_XTYPE;
                let str = rows[0].DICTIONARY_DDCODE;
                /* if (state.basicFields.length > 0) {
                  let name = '';
                  const cfg = ['ID', 'CODE', 'NAME'],
                    nodeCfg = ['id', 'code', 'text'];
                  cfg.forEach((c) => {
                    if (code.substring(code.length - c.length) == c) {
                      name = code.substring(0, code.length - c.length);
                    }
                  });
                  //多选框是多选
                  const sm = ['cgroup'].indexOf(xtype) == -1 ? 'S' : 'M';
                  if (name != '') {
                    const codes = [],
                      nodes = [];
                    cfg.forEach((c, index) => {
                      if (state.basicFields.indexOf(name + c) != -1) {
                        codes.push(name + c);
                        nodes.push(nodeCfg[index]);
                      }
                    });
                    str += ',' + codes.join('~') + ',' + nodes.join('~') + ',' + sm;
                  } else {
                    //默认code
                    str += ',' + code + ',code,' + sm;
                  }
                } */
                if (isNotEmpty(fieldDicConfigInfo.value)) {
                  str = str + ',' + fieldDicConfigInfo.value + ',S';
                }
                formState.value.RESOURCEFIELD_CONFIGINFO = str;
              }
            },
          });
        },

        // //获得表的字段信息
        getTableFields() {
          loadTabelColumn({
            strData: JSON.stringify([{ tableName: state.tableCode, modelName: '', doTree: false }]),
          })
            .then((res) => {
              const columns = res.data['dynabean.' + state.tableCode];
              const columnCodes = [];
              columns.forEach((rec) => {
                columnCodes.push(rec.name);
              });
              state.basicFields = columnCodes;
            })
            .catch((err) => {
              Modal.alert(err.message, 'error');
            });
        },
        // 获得字段对应的字典项配置
        getFiledDicConfigInfo() {
          getDicConfigInfo({
            funcId: props.funcBean.JE_CORE_FUNCINFO_ID,
            fieldCode: formState.value.RESOURCEFIELD_CODE,
          }).then((data) => {
            fieldDicConfigInfo.value = data.data || '';
          });
        },
      };
      onBeforeMount(() => {
        const arr = [];
        for (let i = 1; i < 50; i++) {
          arr.push(String(i));
        }
        state.activeKey = arr;
      });
      onMounted(() => {
        Object.keys(formState.value).forEach((item) => {
          if (formState.value[item] === '') {
            formState.value[item] = undefined;
          }
        });
        nextTick(() => {
          watch(
            () => formState.value.RESOURCEFIELD_CODE,
            () => {
              if (
                ['rgroup', 'cgroup', 'cbbfield', 'treessfield'].includes(
                  formState.value.RESOURCEFIELD_XTYPE,
                )
              ) {
                methods.getFiledDicConfigInfo();
              }
            },
            {
              deep: true,
              immediate: true,
            },
          );
        });
      });

      // 暴露doSave方法，用于drawer保存关闭使用，返回Promise，成功关闭
      expose({ doSave: methods.onSubmit });

      return {
        tableFields,
        funcStore,
        dicGridStore,
        addDicColumn,
        deleteDicColumn,
        dicType,
        ...toRefs(state),
        ...methods,
        modalOption,
        // addColumn,
        formState,
        listFiledItem,
        validateInfos,
      };
    },
  });
</script>
<style lang="less">
  .je-function-dicfunc {
    .je-func-data .je-pager {
      border-bottom-width: 1px;
    }
    .je-tree-func.je-tree-func-search {
      border-bottom: 1px solid #f0f2f5;
    }
  }
  .form-edit-field-config {
    display: flex;
    justify-content: space-between;
    width: 100%;
    .ant-form-item-label {
      label {
        //这是关键
        white-space: normal;
        height: auto;
        margin: 10px 0 0 0;
        vertical-align: top;
        line-height: 1;
      }
    }
    .raidoClass {
      width: 100%;
      padding-left: 0;
      > label {
        width: 25%;
        text-align: center;
      }
    }
    .ant-collapse-icon-position-right > .ant-collapse-item > .ant-collapse-header {
      padding: 5px 16px !important;
      background: #f7f9fc !important;
    }
  }
</style>
<style lang="less" scoped>
  .form-edit-field-config {
    height: 100%;
    display: flex;
    flex-direction: column;
    .btnWrap {
      flex: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 40px;
      line-height: 40px;
      padding: 0 16px;
      border: 1px solid #e6e6e6;
      border-bottom: 0;
      background-color: #f1f1f1;
      .title {
        margin: 0;
        font-size: 16px;
      }
      .submit {
        margin: 0 0 0 auto;
      }
      .close {
        margin: 0 0 0 20px;
        // padding: 5px;
        font-size: 20px;
        cursor: pointer;
      }
    }
    .form-config {
      flex: auto;
      overflow: auto;
      &::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
      }
      .top {
        display: flex;
        padding: 0 0 10px 0;
        .item {
          padding: 0 7px;
          cursor: pointer;
          // .fal:before {
          //   margin: 0 3px 0 0;
          // }
        }
      }
      .info {
        padding: 5px 10px 10px 10px;
        border: 1px solid #a8d09d;
        background: #eff9f2;
        color: #36761f;
        font-size: 14px;
        .title {
          margin: 0;
          color: #36761f;
          font-size: 14px;
          font-weight: 400;
        }
        .p {
          margin: 4px 0 0 0;
          line-height: 1.2;
          // text-align: justify;
        }
      }
      .prompt {
        margin: 0 0 0 10px;
        font-size: 14px;
        color: #3265f5;
        vertical-align: top;
        font-style: italic;
      }
      .filesActive {
        background: #eaf4fe !important;
        color: #3265f5 !important;
      }
      .iconWrap {
        i {
          cursor: pointer;
        }
      }
      // .inputWrap {
      //   position: relative;
      //   .setIcon {
      //     position: absolute;
      //     top: 50%;
      //     right: 10px;
      //     transform: translate(0, -50%);
      //     cursor: pointer;
      //     z-index: 1000;
      //   }
      // }
    }
  }
</style>
